<template>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="1100px" append-to-body>
        <el-form ref="form" :model="model" :rules="rules" inline label-width="90px" label-suffix=":" class="form-wrap-class">
            <el-form-item label="入库仓库" prop="warehouse" v-if="!isConfirm">
                <el-select v-model="model.warehouse" placeholder="请选择仓库" clearable style="width: 240px" :disabled="!isAdd">
                    <el-option v-for="item in dict.warehouseList" :key="item.id" :label="item.name" :value="item.name"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="扫描/录入" prop="seller_sku" class="full" v-if="!isConfirm">
                <el-input placeholder="请输入/扫描商品SKU/识别码" v-model="model.seller_sku" @change="addSeller" style="width: 1000px" :disabled="!isAdd">
                    <el-select v-model="selectValue" slot="prepend" placeholder="请选择" style="width: 140px" :disabled="!isAdd">
                        <el-option label="SKU/识别码" value="1"></el-option>
                    </el-select>
                    <el-button slot="append" type="primary" icon="el-icon-search" @click="showSellerDialog" :disabled="!isAdd">选择商品</el-button>
                </el-input>
            </el-form-item>
            <el-form-item label="" prop="in_stores" class="full">
                <el-table :data="model.in_stores" border script style="width: 1000px">
                    <el-table-column label="商品sku" prop="seller_sku"></el-table-column>
                    <el-table-column label="货架位" prop="warehouse_position">
                        <template slot-scope="scope">
                            <el-select v-model="scope.row.warehouse_position" placeholder="" style="width: 100%" :disabled="!isAdd">
                                <el-option v-for="item in dict.goodsshelvesList" :key="item.id" :label="item.name" :value="item.name"></el-option>
                            </el-select>
                        </template>
                    </el-table-column>
                    <el-table-column label="仓库分区" prop="warehouse_partition">
                        <template slot-scope="scope">
                            <el-select v-model="scope.row.warehouse_partition" placeholder="" style="width: 100%" :disabled="!isAdd">
                                <el-option label="拣货区" value="1" key="1"></el-option>
                                <el-option label="次品区" value="2" key="2"></el-option>
                            </el-select>
                        </template>
                    </el-table-column>
                    <el-table-column label="入库单价" prop="warehouse_price">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.warehouse_price" placeholder="请输入入库单价" style="width: 100%"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="入库数量" prop="in_stores_quantity">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.in_stores_quantity" placeholder="请输入入库数量" style="width: 100%"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="80" v-if="isAdd">
                        <template slot-scope="scope">
                            <el-button type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form-item>
            <el-form-item label="入库备注" prop="remark" class="full" v-if="!isConfirm">
                <el-input type="textarea" v-model.trim="model.remark" placeholder="请输入备注" :autosize="{ minRows: 3, maxRows: 6 }" clearable style="width: 1000px;"></el-input>
                <div class="color-list">
                    <div
                        class="color-item"
                        v-for="item in dict.colorList"
                        :key="item.value"
                        :style="{ backgroundColor: item.label, borderColor: item.value == model.remark_color ? '#000' : '#fff' }"
                        @click="chooseColor(item)"
                    ></div>
                </div>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-checkbox v-model="model.is_now_in" :true-label="1" :false-label="0" style="margin-right: 12px;" v-if="!isConfirm">立即入库</el-checkbox>
            <el-button type="primary" :loading="save" :disabled="save" @click="submit">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
        </div>

        <SpuListDialog v-model="sellerDialog.visible" :params="sellerDialog.data" @selectRow="selectSeller"></SpuListDialog>
    </el-dialog>
</template>

<script>
import { getWarehouseList, getGoodsshelvesList, geWarehouseSku, inStoresAdd, inStoresEdit, inStoresConfirm, inStoresDetail } from '@/api/warehouse'
import SpuListDialog from './SpuListDialog.vue'
export default {
    name: 'DetailDialog',
    components: { SpuListDialog },
    props: {
        value: {
            type: Boolean,
            default: false,
            required: true,
        },
        params: {
            type: Object,
            default: () => {},
        },
        type: {
            type: String,
            default: '',
        },
    },
    data() {
        return {
            selectValue: '1',
            model: {
                seller_sku: '',
                warehouse: '武汉江夏仓',
                is_now_in: 1, // 1:立即发布 0：不立即发布
                remark: '',
                remark_color: '',
                in_stores: [],
            },
            rules: {},
            dict: {
                warehouseList: [],
                goodsshelvesList: [],
                colorList: [
                    { label: '#c03639', value: 1 },
                    { label: '#30b08f', value: 2 },
                ],
            },
            save: false,
            sellerDialog: {
                visible: false,
                data: {},
            },
        }
    },
    computed: {
        title() {
            const map = {
                add: '创建入库单',
                edit: '编辑入库单',
                confirm: '确认入库',
            }
            return map[this.type]
        },
        isConfirm() {
            return this.type === 'confirm'
        },
        isAdd() {
            return this.type === 'add'
        },
        dialogVisible: {
            get() {
                return this.value
            },
            set(val) {
                this.$emit('input', val)
            },
        },
    },
    async mounted() {
        try {
            const [warehouseData, goodsshelvesData] = await Promise.all([getWarehouseList(), getGoodsshelvesList()])
            this.dict.warehouseList = warehouseData?.data?.list ?? []
            this.dict.goodsshelvesList = goodsshelvesData?.data?.list ?? []
        } catch (error) {
            console.log(error)
        }
        this.model.in_number = this.params.in_number
        this.getDetail()
    },
    methods: {
        // 删除按钮操作
        handleDelete(row) {
            this.$confirm('是否确认删除?', '警告', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    this.model.in_stores = this.model.in_stores.filter(item => item.seller_sku !== row.seller_sku)
                    this.msgSuccess('删除成功')
                })
                .catch(() => {})
        },
        showSellerDialog() {
            this.sellerDialog.visible = true
        },
        selectSeller(item) {
            this.addItem(item)
        },
        addSeller() {
            if (!this.model.seller_sku) {
                return
            }
            geWarehouseSku({ seller_sku: this.model.seller_sku }).then(res => {
                res.data.list.map(item => {
                    this.addItem(item)
                })
            })
        },
        addItem(item) {
            const index = this.model.in_stores.findIndex(i => i.seller_sku === item.seller_sku)
            if (index !== -1) {
                const temp = this.model.in_stores.find(i => i.seller_sku === item.seller_sku)
                temp.in_stores_quantity = Number(temp.in_stores_quantity) + 1
                this.model.in_stores.splice(index, 1, temp)
            } else {
                this.model.in_stores.push(item)
            }
        },
        chooseColor(item) {
            this.model.remark_color = item.value
        },
        getDetail() {
            this.loading = true
            const params = { in_number: this.model.in_number }
            inStoresDetail(params)
                .then(res => {
                    this.model = Object.assign({}, this.model, res.data)
                    
                })
                .finally(() => {
                    this.loading = false
                })
        },
        submit() {
            this.$refs.form.validate(valid => {
                if (!valid) {
                    return
                }
                const params = { ...this.model }
                if (this.isConfirm) {
                    params.is_now_in = 1
                }
                if (this.save) {
                    return
                }
                this.save = true
                const requestMap = {
                    add: inStoresAdd,
                    edit: inStoresEdit,
                    confirm: inStoresConfirm,
                }
                requestMap[this.type](params)
                    .then(res => {
                        this.$message.success(res.msg)
                        this.dialogVisible = false
                        this.$emit('success')
                    })
                    .finally(() => {
                        this.save = false
                    })
            })
        },
        cancel() {
            this.dialogVisible = false
        },
    },
}
</script>

<style>
.form-wrap-class.el-form .el-form-item {
    width: 50%;
    margin-right: 0;
}
/* .form-wrap-class.el-form .el-form-item .el-input {
    width: 250px;
} */
/* .form-wrap-class.el-form .el-form-item .el-textarea {
    width: 770px;
} */
.form-wrap-class.el-form .el-form-item .el-input-number,
.form-wrap-class.el-form .el-form-item .el-input-number .el-input {
    width: 120px;
}
.form-wrap-class.el-form .el-form-item .el-input-number + .el-input-number {
    margin-left: 10px;
}
.form-wrap-class.el-form .el-form-item.full {
    width: 100%;
}
.upload {
}
.upload-tip span {
    color: #ff4949;
    padding: 0 4px;
}
.color-list {
    display: flex;
    align-items: center;
    height: 36px;
}
.color-item {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    cursor: pointer;
    border: 2px solid #fff;
}
</style>
